<template>
	<view class="cart-content">
		<view class="cart-head" v-if="totalNum == 0 ? false:true">
			<span>已选购商品(<span>{{ totalNum }}</span>)</span>
			<span class='manage1' v-if="bottomStatus" @click='goManage'>管理</span>
			<span class='manage2' v-else @click='goManage'>管理×</span>
		</view>
		<view class="top">
			<view class="list" v-for='(item,index) in cartList' :key='index' v-if="totalNum == 0 ? false:true">
				<view class='red-circle' :class="item.status ? 'redCircle2':'redCircle1'" @click="handleRedCircle(index)">✔</view>
				<image class='img' @click='goDetail(item)' :src="item.img"></image>
				<view class="content">
					<p @click='goDetail(item)'>{{ item.name }}</p>
					<p><span v-if="!bottomStatus" @click='delItem(index)'>删除</span></p>
					<p><span>￥{{ item.price }}</span></p>
					<p>
						<span @click='handleReduce(index)'>-</span>
						<input class='input' type="text" :value="item.buyNum"/>
						<span @click='handleAdd(index)'>+</span>
					</p>
				</view>
			</view>
			<empty-cart v-if="totalNum == 0 ? true:false"></empty-cart>
			<love-heart>
				<span slot='title'>可能喜欢</span>
			</love-heart>
			<card-view></card-view>
			<view class="bottoms" v-if="totalNum == 0 ? false:true"></view>
		</view>
		<view class="bottom" v-if="totalNum == 0 ? false:true">
			<view class="left">
				<view class='red-circle' :class="statusLength == totalNum ? 'redCircle2':'redCircle1'" @click="handleAll(statusLength)">✔</view>
				<view>全选</view>
			</view>
			<view class="center" v-if='bottomStatus'>
				总计：<span>￥{{ totalPrice.toFixed(2) }}</span>
			</view>
			<view class="center" v-else>-----</view>
			<view class="right" @click='goPay(statusLength)' v-if='bottomStatus'>
				去结算({{ statusLength }})
			</view>
			<view class="right" @click='delAll(statusLength)' v-else>
				删除选中({{ statusLength }})
			</view>
		</view>
	</view>
</template>

<script>
	import emptyCart from './view/empty_cart.vue'
	import loveHeart from './view/love_heart.vue'
	import cardView from '../tab1/view/card.vue'
	import { mapGetters } from 'vuex'
	export default{
		components:{
			emptyCart,
			loveHeart,
			cardView
		},
		data(){
			return{
				bottomStatus: true
			}
		},
		computed:{
			cartList(){
				return this.$store.state.b.cart
			},
			...mapGetters({
				totalNum: 'getCartLength',
				totalPrice: 'getTotalPrice',
				statusLength: 'getCartStatus'
			}),
			// totalNum(){
			// 	return this.$store.getters.getCartLength
			// },
			// totalPrice(){
			// 	return this.$store.getters.getTotalPrice.toFixed(2);
			// },
			// statusLength(){
			// 	return this.$store.getters.getCartStatus
			// }
		},
		methods:{
			// 跳转至详情页
			goDetail(item){
				uni.navigateTo({
					url:'/components/cardItems',
					success(res) {
						res.eventChannel.emit('sendDetail', { data: item })
					}
				})
			},
			// 选中单个按钮
			handleRedCircle(index){
				this.$store.commit('changeItemStatus',index)
			},
			// 选中全部按钮
			handleAll(statusLength){
				this.$store.commit('changeAllStatus',statusLength)
			},
			// 减少商品
			handleReduce(index){
				this.$store.commit('reduceNum',index)
			},
			// 增加商品
			handleAdd(index){
				this.$store.commit('addNum',index)
			},
			// 管理购物车
			goManage(){
				this.bottomStatus = !this.bottomStatus
			},
			// 删除购物车单个商品
			delItem(index){
				this.$store.commit('delItem',index)
			},
			// 删除选中商品
			delAll(statusLength){
				this.$store.commit('checkedStatus',statusLength)
			},
			// 去支付选中商品
			goPay(statusLength){
				this.$store.commit('payCheckedStatus',statusLength)
				uni.navigateTo({
					url: '/pages/tab3/view/pay?keyword=cart'
				})
			},
		}
	}
</script>

<style lang='scss'>
	.bottoms{
		width: 100%;
		height: 8vh;
		background-color: rgba(0,0,0,0);
	}
	.manage1{
		color: rgba(30,144,255,1);
		border: 1rpx solid rgba(30,144,255,.5);
		background-color: rgba(30,144,255,.1);
	}
	.manage2{
		color: rgba(216,30,6,1);
		border: 1rpx solid rgba(216,30,6,.5);
		background-color: rgba(216,30,6,.1);
	}
	.red-circle{
		color: white;
		text-align: center;
		line-height: 40rpx;
		font-size: 25rpx;
		border-radius: 50%;
	}
	.redCircle1{
		width: 45rpx;
		height: 45rpx;
		background-color: white;
		border: 5rpx solid #C8C7CC;
	}
	.redCircle2{
		width: 45rpx;
		height: 45rpx;
		background-color: red;
		border: 5rpx solid white;
	}
	.cart-content{
		width: 100%;
		height: 100vh;
		background-color: rgba(176,196,222,.1);
		.cart-head{
			width: 100%;
			height: 5vh;
			display: flex;
			justify-content: space-between;
			align-items: center;
			span:first-child{
				margin-left: 10rpx;
				span{
					color: #808080;
					margin-right: 10rpx;
				}
			}
			>span:nth-child(n+2){
				width: 100rpx;
				height: 60%;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 20rpx;
				font-size: 26rpx;
				border-radius: 30rpx;
			}
		}
		.top{
			width: 100%;
			height: 100vh;
		  background-image: linear-gradient(to right bottom,#FFFFFF,#F0F8FF);
			overflow-y: auto;
			.list{
				width: 100%;
				height: 200rpx;
				background-color: white;
				border-bottom: 1rpx solid rgba(176,196,222,.3);
				display: flex;
				align-items: center;
				justify-content: space-evenly;
				.img{
					width: 160rpx;
					height: 160rpx;
					border-radius: 10rpx;
				}
				.content{
					width: 62%;
					height: 160rpx;
					position: relative;
					p:nth-child(-n+2){
						width: 100%;
						height: 50rpx;
						line-height: 50rpx;
						font-size: 30rpx;
						color: rgba(0,0,0,.7);
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
					p:nth-child(2){
						position: relative;
						span{
							position: absolute;
							right: 5rpx;
							bottom: 7rpx;
							width: 100rpx;
							height: 70%;
							display: flex;
							justify-content: center;
							align-items: center;
							font-size: 26rpx;
							border-radius: 30rpx;
							color: rgba(216,30,6,1);
							border: 1rpx solid rgba(216,30,6,.5);
							background-color: rgba(216,30,6,.1);
						}
					}
					p:nth-child(3){
						position: absolute;
						left: 0;
						bottom: 0;
						color: red;
						font-size: 35rpx;
					}
					p:last-child{
						width: 220rpx;
						display: flex;
						position: absolute;
						right: 5rpx;
						bottom: 0;
						span:first-child{
							border-top-left-radius: 10rpx;
							border-bottom-left-radius: 10rpx
						}
						span:last-child{
							border-top-right-radius: 10rpx;
							border-bottom-right-radius: 10rpx
						}
						span{
							width: 200rpx;
							text-align: center;
							border: 1rpx solid rgba(176,196,222,.5);
						}
						.input{
							text-align: center;
							font-size: 28rpx;
							border-top: 1rpx solid rgba(176,196,222,.5);
							border-bottom: 1rpx solid rgba(176,196,222,.5);
						}
					}
				}
			}
		}
		.bottom{
			width: 100%;
			height: 8vh;
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 9;
			background-color: white;
			border-top: 2rpx solid rgba(176,196,222,.3);
			display: flex;
			span{
				color: red;
			}
			.left{
				width: 20%;
				height: 100%;
				display: flex;
				justify-content: space-around;
				align-items: center;
			}
			.center{
				width: 53%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.right{
				width: 27%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: red;
				color: white;
				letter-spacing: 2rpx;
			}
		}
	}
</style>
